<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022/5/19
  Time: 22:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>展示商品库存</title>
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goodsName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品状态</label>
                            <div class="layui-input-inline" style="width: 280px">
                                在售<input type="radio" name="goodsState" value="在售" >
                                下架<input type="radio"  name="goodsState" value="下架">
                                全部<input type="radio"  name="goodsState" value="" checked="true">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品供应商</label>
                            <div class="layui-input-inline">
                                <select name="supplierid" class="layui-input">
                                    <option value="">全部供应商</option>
                                    <c:forEach items="${supp}" var="s">
                                        <option value="${s.supplierId}">${s.supplierName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">所属仓库</label>
                            <div class="layui-input-inline">
                                <select name="reponseTypePid" class="layui-input">
                                    <option value="">全部仓库</option>
                                    <c:forEach items="${reps}" var="r">
                                        <option value="${r.reponseTypePid}">${r.reponseTypeName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="userFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>
            <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                <i class="layui-icon layui-icon-delete"></i>
                删除
            </button>
        </script>
        <table class="layui-hide" id="currentTableId" lay-filter="userTableFilter"></table>

        <script type="text/html" id="userOperate">
                <a class="layui-btn  layui-btn-normal layui-btn-sm "  lay-event="uptate"><i class="layui-icon layui-icon-edit">修改</i></a>
                <a class="layui-btn layui-btn-sm layui-btn-danger   data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete">删除</i></a>
        </script>
    </div>
</div>
<script type="text/html" id="imgtmp">
    <img src="{{d.goodsImg}}" style="width:80px;height:80px">
</script>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    //引入table
    layui.use(['table','form'],function (){

        var $ = layui.jquery;
        var from = layui.form;
        var table = layui.table;
        var form = layui.form;
        //执行表格的数据填充操作
        table.render({
            //指定渲染的表格
            elem:'#currentTableId',
            //指定获取数据的路径
            url:'inventory/allInventory',
            toolbar:'#toolbarDemo',
            //规定请求方式
            method:'post',
            //开启分页
            page:true,
            check:true,
            //指定每页显示数
            limits:[1,10,15,20],
            even:true,
            cols:[[
                {type: 'checkbox'},
                {field:'stockId',title:'库存编号', align: 'center'},
                {field:'goodsImg',title:'商品图片', align: 'center',templet: "#imgtmp"},
                {field: 'goodsName', title: '商品名称', align: 'center'},
                {field: 'goodsPrice', title: '商品价格', align: 'center'},
                {field: 'capacity', title: '商品容量', align: 'center'},
                {field: 'specifiCations', title: '商品单位', align: 'center'},
                {field: 'supplierName', title: '供应商名称', align: 'center'},
                {field: 'goodsState', title: '商品状态', align: 'center'},
                {field: 'reponseTypeName', title: '所属仓库',align: 'center'},
                {field: 'stockCount', title: '商品库存', align: 'center'},
                {field: 'stockwarnCount', title: '预警值', align: 'center'},
                {field: 'purchasePrice', title: '进货价格', align: 'center'},
                {title: '操作',toolbar:'#userOperate',minWidth:250, align: 'center'}
            ]],
            done:function(res, curr, count){
                var that = this.elem.next();
                res.data.forEach(function (item, index) {
                    var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                    var td = $(tr).children("td");
                    td.eq(11).css({"font-weight":"bolder"});

                    if(res.data[index].stockCount<=res.data[index].stockwarnCount){
                        tr.css("background-color", "#ffe891");
                        //tr.css("color", "white");
                        td.eq(11).css("background-color", "#fdc1cb");
                        td.eq(11).children().text("即将竭尽");
                        td.eq(11).css("color", "#ce646c");
                    }else if(res.data[index].stockCount<=res.data[index].stockwarnCount*2 && res.data[index].stockCount >= res.data[index].stockwarnCount){
                        //tr.css("background-color", "#FFA500");
                        //tr.css("color", "white");
                        td.eq(11).css("background-color", "#ffe891");
                        td.eq(11).children().text("库存紧张");
                        td.eq(11).css("color", "#88262e");
                    }else{
                        td.eq(11).children().text("库存充足");
                        td.eq(11).css({"background-color":"#bcefc9","color":"#63a265"});
                    }
                    console.log(item);
                    console.log(index);
                });
                console.log(res);
                console.log(curr);
                console.log(count);
            }
        })
        //from表单提交事件
        form.on('submit(userFormSubmit)',function (data){
            //alert(data.supplierid);
            //执行搜索重载
            table.reload('currentTableId',{
                //规定默认第几页
                page:{
                    curr:1
                },
                where:{
                    //添加请求参数
                    goodsName:data.field.goodsName,//商品名称
                    goodsState:data.field.goodsState,//商品状态
                    supplierid:data.field.supplierid,//商品品牌
                    reponseTypePid:data.field.reponseTypePid//所属仓库
                }
            });
            return false;
        })
        table.on('toolbar(userTableFilter)', function(obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });
        window.add = function(){
            //添加操作
            layer.open({
                //执行修改用户操作
                title:'添加库存信息',
                type:2,
                shade: 0.1,
                area:['55%','50%'],
                content: '/inventory/addInventory'
            })
        }
        //批量删除
        window.batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;//obj.config.id获取表单名
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let invs ="";//选中的数
            for (let i = 0; i < data.length; i++) {
                invs += data[i].stockId+ ",";
            }
            invs = invs.substr(0,invs.length - 1);
            layer.confirm('确定要删除这些库存吗?', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.post("/inventory/delInventory",{invs:invs},function (result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            //执行重载
                            table.reload('currentTableId');
                            layer.close(index);
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                })
            });
        }
        //表格事件
        table.on('tool(userTableFilter)',function (obj){
            //判断表格的的操作类型
            if (obj.event==='uptate'){
                //修改用户信息
                layer.open({
                    //执行修改用户操作
                    title:'修改<span style="color: #0C0C0C;font-weight: bold;font-size: 20px">'+obj.data.goodsName+'</span>商品库存信息',
                    type:2,
                    shade: 0.1,
                    area:['50%','37%'],
                    content: '/inventory/upInventory?stockId='+obj.data.stockId
                })
            }else if(obj.event==='delete'){
                //执行删除
                layer.confirm('真的要删除吗？',function(index){
                    $.post('/inventory/delInventory',{invs:obj.data.stockId},function(result){
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                //执行重载
                                table.reload('currentTableId');
                                layer.close(index);
                            });
                        }else{
                            layer.msg(result.msg,{icon:2},function (index){
                                layer.close(index);
                            })
                        }
                    });
                })
            }
        })
    })
</script>
</body>
</html>